import { Button, Card, Col, Pagination, Row, Table, Tag, Tree } from 'antd'
import React, { useEffect, useState } from 'react'
import type { TableColumnsType, TreeDataNode } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import { getDepartmentList, getDocterList, getScheduleList } from '@/api/hospital/hospitalList';
import { IBookingScheduleList, IDepList, IDocterList } from '@/api/hospital/model/hospitalListType';

let height = document.documentElement.clientHeight - 180 // 根据可视区计算高度
export default function HospitalSchedule() {
  const columns: TableColumnsType<any> = [
      {
        title: '序号',
        render(value:any,row:any,index:number) {
          return (index + 1)
        }
      },
      {
        title: '职称',
        dataIndex:'title'
      },
      {
        title: '号源时间',
        dataIndex: 'workDate'
      },
      {
        title: '总预约时间',
        dataIndex: 'reservedNumber'
      },
      {
        title: '剩余预约数',
        dataIndex: 'availableNumber'
      },
      {
        title: '挂号费(元)',
        dataIndex: 'amount'
      },
      {
        title: '擅长技能',
        dataIndex: 'skill'
      }
  ]
  
  // 获取传递的参数
  const {hoscode} = useParams()
  const navigate = useNavigate()
  // 定义数据状态
  let [departmentList , setDeaprtmentList] = useState<IDepList>([])
  let [expandedKeys, setExpendedKeys] = useState<string[]>([])
  let [depname, setDepname] = useState<string>()
  let [depcode, setDepcode] = useState<string>()
  // 分页状态
  let [current, setCurrent] = useState<number>(1)
  let [pageSize, setPageSize] = useState<number>(5)
  let [total, setTotal] = useState<number>(30)
  let [hosname, setHosname] = useState<string>()
  let [workDate, setWorkDate] = useState<string>()
  let [bookingScheduleList, setBookingScheduleList] = useState<IBookingScheduleList>([])
  let [docterList,setDocterList] = useState<IDocterList>([])
  // 获取科室列表
  const getDepList = async () => {
    let departmentList = await getDepartmentList(hoscode as string)
    // console.log('获取到的数据',depList);
    // 设置科室列表状态数据
    // console.log(departmentList);
    // 禁用所有的一级科室,添加disabled
    departmentList = departmentList.map(item=> {
      item.disabled = true
      return item
    })
    // 展开所有的一级路由
    let expandedKeys = departmentList.map(item => item.depcode)
    setExpendedKeys(expandedKeys)
    setDeaprtmentList(departmentList)
    // console.log('科室列表详情',departmentList); 
    // 处理选中的科室
    let depname = (departmentList[0].children as IDepList)[0].depname
    let depcode = (departmentList[0].children as IDepList)[0].depcode
    setDepname(depname)
    setDepcode(depcode)
    
  }
  // 获取科室列表排版表单日期详情
  const getSchedList = async () => {
    let {total,bookingScheduleList,baseMap:{hosname}} = await getScheduleList(current,pageSize,hoscode as string,depcode as string)
    // console.log('排版日期详情',bookingScheduleList);
    
    setTotal(total)
    setBookingScheduleList(bookingScheduleList)
    setHosname(hosname)
    setWorkDate(bookingScheduleList[0].workDate)
    
  }
  // 获取排版医生具体详情
  const getDecList = async () => {
    let docterList = await getDocterList(hoscode as string,depcode as string,workDate as string) 
    console.log('医生列表详情',docterList);
    setDocterList(docterList)
    
  }

  useEffect(() => {   
    hoscode && getDepList()
  }, [hoscode])

  useEffect(()=> {
    depcode && getSchedList()
  }, [depcode,current,pageSize])
  // 组件挂载完成执行，work更新执行
  useEffect(()=> {
    workDate && getDecList()
  }, [workDate])
    
  return (
    <div>
      <Card>
        <div>选择： {hosname} / {depname} / {workDate}</div>
        <Row className='mar-t' gutter={30}>
            <Col span={4}>
                <div style={{border:'1px solid #ddd',height, overflowY:'scroll'}}>
                <Tree
                  // 渲染数据
                  treeData={departmentList as []}
                  // 存储渲染时的映射关系
                  fieldNames={{
                    title: 'depname',
                    key: 'depcode'
                  }}
                  // 展开的数组
                  expandedKeys={expandedKeys}
                  selectedKeys={[depcode as string]}
                  onSelect={(selectedKeys:any,info:any) => {
                    // 状态重置
                    setDepname(info.node.depname)
                    setDepcode(info.node.depcode)
                  }}  
                />
                </div>
            </Col>
            <Col span={20}>
              {bookingScheduleList.map((item,index) => (
                <Tag color={workDate === item.workDate ? 'green': ''} key={item.workDate} onClick={()=>setWorkDate(item.workDate)}>
                <div>{item.workDate} {item.dayOfweek}</div>
                <div>{item.availableNumber}/{item.reservedNumber}</div>
            </Tag>
              ))}
                
                <Pagination 
                    defaultCurrent={current}
                    total={total}
                    pageSize={pageSize}
                    className='mar-t'
                    hideOnSinglePage={true}
                    pageSizeOptions={[5,10,15,30]}
                    onChange = {(page:number,pageSize: number) => {
                      setCurrent(page)
                      setPageSize(pageSize)
                    }}
                    />
                <Table
                    className='mar-t'
                    columns={columns}
                    rowKey={"id"}
                    dataSource={docterList}
                  
                />
                <Button className='bor-r' onClick={()=> navigate(-1)}> 返回</Button>
            </Col>
        </Row>
      </Card>
    </div>
  )
}
